<template>
	
	<view class="head" v-for="item,index in xiang" :key="index">
		<view class="nav" style="padding-top: 80rpx;">
			<image class="img" src="../../../static/左箭头.png" mode="" @click="add"></image>
			<span class="spans">{{item.name}}</span>
			<!-- <span class="spans1" @click="manage">管理</span> -->
		</view>
		<view class="line">
			<view class="line1">
				<p>{{item.assets_num}}</p>
				<p>设备总数</p>
			</view>
			<view class="line1">
				<p>{{item.assets_normal}}</p>
				<p>正常设备</p>
			</view>
			<view class="line1">
				<p>{{item.assets_error}}</p>
				<p>故障设备</p>
			</view>
			<view class="line1">
				<p>{{item.errorRate}}</p>
				<p>故障率</p>
			</view>
		</view>
		<!-- <navigator url="../Inspection/Inspection.vue"></navigator> -->
	</view>
	<!-- 详情资产其他接口 -->
	<view class="body">
		<view class="body-a" v-for="item,index in qi" :key="index">
			<view class="views-a">
				<span class="span-a">{{item.name}}</span>
				<span class="span-b">{{item.address}}</span>
			</view>
			<view class="views-b">
				<button class="btn" type="primary">
					<image src="../../../static/mipmap-xxxhdpi/icon_normal_state.png" mode=""></image>
					{{item.status === 1 ? "正常" : "故障"}} 
				</button>
				<button class="btn-b" type="primary" @click="scanQRCode">巡检</button>
				<span>最近巡检:{{item.time}}</span>
			</view>
		</view>
		<view class="bottom">
			<button class="btnb" type="primary" style="display: inline-block;" @click="scanQRCode">扫码巡检</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		ZiDetails,
		Qi,
		Shan,
		Quan,
		Xian
	} from "@/utils/file.js"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	let id = ref();
	let xiang = reactive([])
	let qi = reactive([])
	onLoad((options) => {
		id.value = options.id;
		ZiDetails(uni.getStorageSync('token'), id.value).then(res => {
			console.log(res, "资产详情", id.value);
			xiang.push(...[res.data])
		})
		// 资产详情其他接口
		Qi(uni.getStorageSync('token'), 0, 100, id.value).then(res => {
			console.log(res.data.data, "资产其他详情接口");
			qi.push(...res.data.data)
		})
	})
	function add() {
		uni.navigateTo({
			url: "../Asset-management/Asset-management"
		})
	}
	 function scanQRCode() {
	    uni.scanCode({
	      success: (res) => {
	        const qrCodeResult = JSON.parse(res.result);
	        console.log("扫码成功:", qrCodeResult.device_code);
			uni.navigateTo({
				url:`../Inspection/Inspection?deviceCode=${qrCodeResult.device_code}`
			})
	        // Implement logic to handle the scanned QR code
	      },
	      fail: (error) => {
	        console.error("扫描失败",error);
	        // Handle scanning failure as needed
	      },
	    });
	  }
</script>
<!-- // 点击管理全选进行删除
	// function manage(){
	// 	console.log(1111);
	// 	Shan(localStorage.getItem("token"),192).then(res=>{
	// 		console.log(res,"删除接口");
	// 	})
	// }
	// 资产权限
	// Quan(localStorage.getItem("token")).then(res=>{
	// 	console.log(res,"权限");
	// })
	// // 权限分配
	// Xian(localStorage.getItem("token"),1).then(res=>{
	// 	console.log(res,"权限分配");
	// }) -->

<style scoped lang="scss">
	html,
	body {
		background-color: #e6e6e6;
	}

	.nav {
		position: relative;
		width: 750rpx;
		height: 100rpx;
		background-color: #f8f8f8;
		line-height: 100rpx;
	}

	.img {
		position: absolute;
		width: 54rpx;
		height: 54rpx;
		margin-top: 15rpx;
	}

	.spans {
		position: absolute;
		width: 550rpx;
		height: 100rpx;
		// background-color: pink;
		left: 14%;
		line-height: 100rpx;
		text-align: center;
		font-weight: bolder;
	}

	.spans1 {
		position: absolute;
		right: 20rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.line {
		width: 100%;
		height: 150rpx;
		// background-color: aqua;
		border-top: 1px solid #cacaca;
		margin: 0 auto;
		background-color: #ffffff;
	}

	.line1 {
		width: 180rpx;
		height: 80%;
		text-align: center;
		// border:1px solid;
		display: inline-block;
		margin-top: 30rpx;
	}

	.line1 p:nth-child(1) {
		// color: #55aaff;
		line-height: 170%;
	}

	.body-a {
		width: 750rpx;
		height: 160rpx;
		margin-top: 15rpx;
		background-color: #ffffff;
	}

	.views-a {
		// background-color: pink;
		width: 700rpx;
		height: 70rpx;
		margin: 0 auto;

		.span-a {
			display: inline-block;
			line-height: 70rpx;
		}

		.span-b {
			display: inline-block;
			float: right;
			line-height: 70rpx;
		}
	}

	.views-b {
		// background-color: blue;
		width: 700rpx;
		height: 80rpx;
		margin: 0 auto;

		.btn {
			position: relative;
			display: inline-block;
			width: 138rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: blue;
			margin-top: 10rpx;
			font-size: 20rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: -20rpx;
				top:6rpx;
			}
		}

		.btn-b {
			width: 130rpx;
			height: 60rpx;
			display: inline-block;
			float: right;
			font-size: 15px;
			line-height: 60rpx;
			margin-top: 10rpx;
		}

		span {
			display: inline-block;
			float: right;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}
	}
	.bottom{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
		.btna{
			margin-left: 1.9375rem;
		}
		.btnb{
			width: 100%;
			margin: 0 auto;
		}
	}
</style>